<template>
  <div id="chat-list-page" :style="{
  width:'100%',
  height: (this.getWinSize().height-45-this.getSafeArea().top)+'px',
  paddingTop:(this.getSafeArea().top+45)+'px'
  }"
       v-loading="isLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
  <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
    <div id="back-button" @click="$router.push('/MemberHome')">
      <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
    </div>
    <span>聊天会话</span>
  </div>

    <div id="shop-chat-list" :style="{
      height: (this.getWinSize().height-55-this.getSafeArea().top)+'px',
    }">
      <div class="item" @click="detail(currSession)" v-for="(currSession,index) in chatSessionList">
        <div class="logo-box">
          <img :src="currSession.fromIcon" />
        </div>
        <div class="info-box">
          <div class="row1">
            <div class="shop-name" v-text="currSession.fromName"></div>
            <div class="last-time" v-text="currSession.lastMessageTime"></div>
            <div class="c"></div>
          </div>
          <div class="row2">
            <div class="last-message" v-text="currSession.lastMessage"></div>
            <div class="un-read-nums">
              <span v-if="currSession.unReadNums>0" v-text="currSession.unReadNums"></span>
            </div>
            <div class="c"></div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="chatSessionList.length===0">
      <span class="no-data">暂无会话...</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatList',
  data:function () {
    return {
      isLoading:false,
      chatSessionList:[
        /* {
          "id": 2,
          "userId": 22,
          "userType": "Member",
          "fromId": 7,
          "fromUserType": "Shop",
          "fromIcon": "http://image.yangfankj.com/shop/logo/7.jpg",
          "fromName": "唐久便利",
          "lastMessage": "测试432",
          "unReadNums": 4,
          "lastMessageTime": "2022-08-29 04:43:39"
        },
        {
          "id": 4,
          "userId": 22,
          "userType": "Member",
          "fromId": 5,
          "fromUserType": "Shop",
          "fromIcon": "http://image.yangfankj.com/shop/logo/5.jpg",
          "fromName": "邢攀五金店",
          "lastMessage": "试一下828",
          "unReadNums": 2,
          "lastMessageTime": "2022-08-29 05:41:41"
        } */
      ]
    }
  },
  mounted () {
    this.getChatSessionList()

  },
  methods:{
    // 获取会话-列表
    getChatSessionList:function (){
      let $this=this
      $this.isLoading = true
      $this.MyRequest($this.ApiDoNameMember+'Member/chatMessageSessionList', {}, function (data) {
        $this.isLoading = false
        $this.chatSessionList=data
      }, function (data) {
        $this.isLoading = false
        $this.successTip(data.message,'error')
        // $this.form.password = ''
        $this.reflshVerifyImg()
      })
    },
    // 跳转-会话详情
    detail:function (currSession) {
      this.$router.push({
        name:'Chat',
        query:{
          chatSessionId: currSession.id
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
